<template>
  <div class="recharge-page">
    <div class="container">
      <div class="recharge-card">
        <h2 class="title">账户充值</h2>

        <!--      当前余额-->
        <div class="balance-section">
          <div class="balance-label">当前余额</div>
          <div class="balance-amount">￥{{ balance.toFixed(2) }}</div>
        </div>

        <!--   充值金额选择     -->
        <div class="amount-section">
          <h3 class="section-title">选择充值金额</h3>
          <div class="amount-options">
            <div
              v-for="amount in amountOptions"
              :key="amount"
              class="amount-option"
              :class="{'active':selectedAmount === amount}"
              @click="selectAmount(amount)">
              ￥{{ amount }}
            </div>
            <div class="amount-option custom"
                 :class="{'active': isCustomComponent}">
              <el-input
                v-model="customAmount"
                placeholder="自定义金额"
                size="small"
                @focus="selectCustomAmount"
                @blur="validateCustomAmount">
                <template slot="prepend">￥</template>
              </el-input>
            </div>
          </div>
        </div>

        <!--   充值按钮     -->
        <div class="acton-section">
          <el-button
            type="primary"
            size="small"
            :disabled="!canSubmit"
            @click="confirmPayment">
            立即充值 ￥{{ rechargeAmount.toFixed(2) }}
          </el-button>
        </div>
      </div>
    </div>

    <!--    支付结果对话框-->
    <vxe-modal
      :title="paymentResult.title"
      v-model="showResultDialog"
      width="400px"
      showFooter esc-closable show-zoom resize>
      <div class="result-dialog">
        <div class="result-icon" :class="paymentResult.status">
          <i :class="paymentResult.icon"></i>
        </div>
        <div class="result-message">{{ paymentResult.message }}</div>
        <div class="result-detail" v-if="paymentResult.detail">
          {{ paymentResult.detail }}
        </div>
      </div>
      <span slot="footer" style="display: flex;justify-content: center;gap: 10px">
        <template v-if="$route.query.from === 'orderPayment'">
          <el-button type="primary" @click="closeResultDialog">返回订单支付</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="closeResultDialog">确定</el-button>
        </template>
      </span>
    </vxe-modal>
  </div>
</template>


<script>
import {getUser} from "@/api/system/user";
import {updateUserAmount} from "@/api/huacai/homestay";

export default {
  name: "RechargePage",
  data() {
    return {
      balance: null,//当前余额
      amountOptions: [50, 100, 200, 500, 1000],//充值金额选择
      selectedAmount: 100,//选中金额
      customAmount: "",//自定义金额
      isCustomAmount: false,//是否自定义金额
      showResultDialog: false,//显示支付结果对话框
      paymentResult: {},//支付结果
    }
  },
  computed: {
    //计算充值金额
    rechargeAmount() {
      return this.isCustomAmount ? parseFloat(this.customAmount) || 0 : this.selectedAmount
    },
    //是否可以提交
    canSubmit() {
      return this.rechargeAmount > 0
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getUser(this.$store.state.user.id).then(res => {
        this.balance = res.data.balance
      })
    },
    //选择要充值的金额
    selectAmount(amount) {
      this.selectedAmount = amount
      this.isCustomAmount = false
      this.customAmount = ""
    },
    //选择自定义金额
    selectCustomAmount() {
      this.isCustomAmount = true
      this.selectedAmount = 0
    },
    //验证自定义金额
    validateCustomAmount() {
      if (this.customAmount === '' || parseFloat(this.customAmount) <= 0) {
        this.isCustomAmount = false
        this.customAmount = ''
        this.selectedAmount = 100
      }
    },
    //确认支付
    confirmPayment() {
      //支付成功
      updateUserAmount(this.rechargeAmount).then(res => {
        console.log(res.data,  "充值后金额")
        this.paymentResult = {
          status: 'success',
          title: '充值成功',
          icon: 'el-icon-success',
          message: '恭喜您，充值成功！',
          detail: `充值成功：￥${this.rechargeAmount.toFixed(2)}.账户余额: ￥${res.data.toFixed(2)}`
        }
        this.showResultDialog = true
        this.getList();
      })
    },
    //关闭对话框
    closeResultDialog() {
      this.showResultDialog = false;
      // 检查是否是从订单支付页面跳转过来的
      if (this.$route.query.from === 'orderPayment') {
        // 跳转回订单支付页面
        this.$router.push({
          path: '/index/booking',
          query: {
            orderId: this.$route.query.orderId
          }
        });
      }
    }
  }
}
</script>


<style scoped lang="scss">
.recharge-page {
  padding: 40px 0;
  background-color: #f5f7fa;
  min-height: calc(100vh - 80px);
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.recharge-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.title {
  font-size: 24px;
  margin: 0 0 30px;
  color: #303133;
  text-align: center;
}

.balance-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 30px;
}

.balance-label {
  font-size: 16px;
  color: #606266;
}

.balance-amount {
  font-size: 24px;
  font-weight: bold;
  color: #ff4949;
}

.section-title {
  margin: 0 0 15px;
  font-size: 18px;
  color: #303133;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
.amount-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}
.amount-option {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
}
.amount-option:hover {
  background-color: #c0c4cc;
}
.amount-option.active {
  //background-color:  #409EFF;
  //border-color:#f5f7fa;
  //color: #409EFF;
  background-color:  rgba(64, 158, 255, 0.5); /* 蓝色背景，50%透明度 */
  border-color:#f5f7fa;
  color: #409EFF;
}
.amount-option.custom {
  padding: 0 10px;
  grid-column: span 1;
}
.amount-section{
  text-align: center;
}
.amount-section .el-button{
  width: 100%;
  max-width: 300px;
  height: 50px;
  font-size: 18px;
}
.result-dialog{
  text-align: center;
  padding: 0 20px 20px;
}
.result-icon{
  font-size: 60px;
  margin-bottom: 20px;
}
.result-icon.success{
  color: #1ab394;
}
.result-icon.error{
  color: #ff4949;
}

.result-message{
  font-size: 18px;
  margin-bottom: 10px;
  color: #303133;
}
.result-detail{
  font-size: 14px;
  color: #606266;
  line-height: 1.6px;
}
</style>
